<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="card-header">
            <p class="card-header-title">角色组</p>
            <!-- <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p> -->
          </div>
          <div style="display: flex;">
            <el-button type="primary" @click="dialogVisible = true">新增</el-button>
            <el-button type="primary" style="margin-left: 20px;">删除</el-button>
          </div>
          <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="用户名称" />
            <el-table-column prop="reportnum" label="用户名称" />
            <el-table-column prop="reportnum9" label="操作" width="200">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="openDiagle(scope.row)">
                  编辑
                </el-button>
                <el-button link type="primary" size="small">
                  删除
                </el-button>

              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card shadow="hover">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="用户列表" name="first">
              <div style="display: flex;">
                <div>用户名称</div>
                <el-input v-model="value1" style="width: 230px;"></el-input>
                <el-button type="primary">查询</el-button>
                <el-button type="primary" style="margin-left: 20px;">关联用户</el-button>
                <el-button type="primary" style="margin-left: 20px;">取消关联</el-button>
              </div>
              <el-table :data="tableData1" border style="width: 100%;margin-top: 20px;">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="用户名称" />
                <el-table-column prop="reportnum1" label="手机号码" />
                <el-table-column prop="reportnum2" label="部门" />
                <el-table-column prop="reportnum3" label="关联时间" />
                <el-table-column prop="" label="操作" width="200">
                  <template #default="scope">
                    <el-button link type="primary" size="small">
                      取消关联
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-tab-pane>
            <el-tab-pane label="角色权限设置" name="second">
              <div>平台权限</div>
              <div>
                <el-checkbox label="允许登录PC后台" value="Value A" />
              </div>
              <div>
                <el-checkbox label="送测申请管理" value="Value A1" />
              </div>
              <div style="margin-left: 30px;">
                <div>
                  <el-checkbox label="送测申请新建" value="Value A2" />
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="新增" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="删除" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="修改" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </div>
              <div style="margin-left: 30px;">
                <div>
                  <el-checkbox label="送测咨询" value="Value A2" />
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="新增" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="删除" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="修改" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </div>
              <div style="margin-left: 30px;">
                <div>
                  <el-checkbox label="送测履历" value="Value A2" />
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="新增" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="删除" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div style="margin-left: 30px;">
                  <el-checkbox label="修改" value="Value A2" />
                  <el-select v-model="value" placeholder="请选择" style="margin-left:10px;width: 240px">
                    <el-option v-for="item in option" :key="item.name" :label="item.label" :value="item.value" />
                  </el-select>
                </div>

              </div>
              <el-button type="primary">
                保存
              </el-button>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>


    <el-dialog v-model="dialogVisible" title="新增">
      <el-form ref="searchRef" label-width="150">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名称">
              <el-input v-model="projectName11" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户描述">
              <el-input v-model="projectName12" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input v-model="projectName13" style="width: 240px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务">
              <el-input v-model="projectName14" style="width: 240px;"></el-input>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-input v-model="projectName15" style="width: 240px;"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row> -->

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue';
const activeName = ref('first')
const value1 = ref('')
const value = ref('')

const dialogVisible = ref(false)
const projectName11 = ref('')
const projectName12 = ref('')
const projectName13 = ref('')
const projectName14 = ref('')
const projectName15 = ref('')
const openDiagle = (item) => {
  dialogVisible.value = true;
  projectName11.value = item.name;
  projectName12.value = item.reportnum;
  projectName13.value = item.reportnum1;
  projectName14.value = item.reportnum2;
  projectName15.value = item.reportnum3;
}

const option = ref([{
  label: '仅本人',
  name: '仅本人',
}, {
  label: '本部门',
  name: '本部门',
}, {
  label: '本部门及下属部门',
  name: '本部门及下属部门',
}, {
  label: '指定部门',
  name: '指定部门',
}, {
  label: '所有数据权限',
  name: '所有数据权限',
},])
const tableData = ref([
  {
    index: '1',
    name: '张飞',
    num: 'A检测',
    reportnum: '张飞',
    reportnum1: '13624556533',
    reportnum2: '销售部',
    reportnum3: '2022-01-19 10:37',
    reportnum4: '2022-01-19 10:37',
    reportnum5: '98%',
    reportnum6: 'admin',
    reportnum7: '2022-01-19 10:37',
    reportnum8: '晶',
    reportnum9: '晶',
  },
]);
const tableData1 = ref([
  {
    index: '1',
    name: '张飞',
    num: 'A检测',
    reportnum: '张飞',
    reportnum1: '测四项目',
    reportnum2: 'admin',
    reportnum3: '2022-01-19 10:37',
    reportnum4: '2022-01-19 10:37',
    reportnum5: '98%',
    reportnum6: 'admin',
    reportnum7: '2022-01-19 10:37',
    reportnum8: '晶',
    reportnum9: '晶',
  },
])
</script>

<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}
</style>